<!-- 404 -->
<template>
  <div class="noteClass">
    <div class="align-self-center">
      <h1>404</h1>
      <h2>UH OH! 页面丢失</h2>
      <p>您所寻找的页面不存在。你可以点击下面的按钮，返回主页。
      </p>
      <router-link to="/"><button class="btn green">返回首页</button></router-link>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      
    };
  },
  methods: {
    
  }
}
</script>
<style scoped>
.align-self-center{
  text-align: center;
  margin: 100px 0;
}
.btn {
  z-index: 1;
  overflow: hidden;
  background: transparent;
  position: relative;
  padding: 8px 50px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 1em;
  letter-spacing: 2px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
  font-weight: bold;
  margin: 5px 0px;
  outline: none;
}
.btn.green {
  border: 4px solid var(--red);
  color: var(--blue);
}
.btn.green:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background: var(--red);
  z-index: -1;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}
.btn.green:hover {
  color: var(--white);
  background: var(--red);
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}
.btn.green:hover:before {
  width: 100%;
}
</style>